<template>
	<div class="bear-PagePithy">
		<iInput
				class="bear-sizer"
				v-if="showSizer"
				v-model="pageSizeInputVal"
				@on-keydown="$_bear_keyDownFn"
				@on-enter="$_bear_changePageSize"
				@on-blur="$_bear_changePageSize">
			<span slot="append">条 / 页</span>
		</iInput>
		<span class="bear-total">共 {{total}} 条</span>
		<div class="bear-but bear-margin el-icon-d-arrow-left"
			 :class="{disabled:isFirstPage}"
			 @click="isFirstPage?null:toPage(1)"></div>
		<div class="bear-but ivu-icon ivu-icon-ios-arrow-back"
			 :class="{disabled:isFirstPage}"
			 @click="isFirstPage?null:toPage(currentPage-1)"></div>
		<iInput
				class="bear-center"
				v-model="pageInputVal"
				:style="{width:inputWidth}"
				@on-keydown="$_bear_keyDownFn"
				@on-keyup="$_bear_keyUp_page"
				@on-blur="$_bear_gotoPage">
			<span slot="append"> / {{allPages}}</span>
		</iInput>
		<div class="bear-but bear-margin ivu-icon ivu-icon-ios-arrow-forward"
			 :class="{disabled:isLastPage}"
			 @click="isLastPage?null:toPage(currentPage+1)"></div>
		<div class="bear-but el-icon-d-arrow-right"
			 :class="{disabled:isLastPage}"
			 @click="isLastPage?null:toPage(allPages)"></div>
	</div>
</template>

<script>
	/**
	 * @author 唐国雄
	 * 简洁的分页
	 * 属性----------------------
	 * :current		当前页(支持sync修饰符)
	 * :total		总记录条数
	 * :page-size	每页记录条数
	 * :show-sizer	是否显示改变分页器
	 * 事件----------------------
	 * @on-change	当前页改变
	 * @on-page-size-change		每页记录条数改变
	 * 方法----------------------
	 * toPage(page)					跳转指定页
	 * changePageSize(pageSize)		改变每页记录条数
	 *
	 * @typedef PagePithy
	 * @event PagePithy#on-change
	 * @type {Number} 当前页
	 *
	 * @event PagePithy#on-page-size-change
	 * @type {Number} 当前页每页记录条数
	 */
	export default{
		name:'PagePithy',
		props:{
			current:{
				type:Number,
				default:1
			},
			// 总记录条数
			total:{
				type:Number,
				default:0
			},
			pageSize:{
				type:Number,
				default:10
			},
			// 是否显示改变分页器
			showSizer:Boolean
		},
		data(){
			const pageSize=currentPageSizeFn(this.pageSize);
			const current=currentPageFn(this.current,Math.max(1,Math.ceil(this.total/pageSize)));
			if(pageSize!==this.pageSize){
				this.$emit('on-page-size-change',pageSize);
			}
			if(current!==this.current){
				this.$emit('update:current',current);
			}
			return {
				// 当前页
				currentPage:current,
				// 每页记录条数
				currentPageSize:pageSize,
				pageInputVal:current,
				pageSizeInputVal:pageSize
			};
		},
		computed:{
			// 总页数
			allPages(){
				return Math.max(1,Math.ceil(this.total/this.currentPageSize));
			},
			inputWidth(){
				return 48+8*2*this.allPages.toString().length+'px';
			},
			isFirstPage(){
				return this.currentPage===1;
			},
			isLastPage(){
				return this.currentPage===this.allPages;
			}
		},
		watch:{
			allPages(val){
				if(val<this.currentPage){
					this.currentPage=val;
				}
			},
			current(val){
				this.currentPage=currentPageFn(val,this.allPages);
			},
			pageSize(val){
				this.currentPageSize=currentPageSizeFn(val);
			},
			currentPage(val){
				this.pageInputVal=this.currentPage;
				this.$emit('on-change',val);
				this.$emit('update:current',val);
			},
			currentPageSize(val){
				this.pageSizeInputVal=this.currentPageSize;
				this.$emit('on-page-size-change',val);
			}
		},
		methods:{
			$_bear_keyDownFn(e){
				const key=e.key;
				if(!(numberKey.includes(key))){
					e.preventDefault();
				}
			},
			$_bear_keyUp_page(e){
				const key=e.key;
				if(key==='ArrowDown'){
					this.toPage(this.currentPage-1);
				}else if(key==='ArrowUp'){
					this.toPage(this.currentPage+1);
				}else if(key==='Enter'){
					this.$_bear_gotoPage();
				}
			},
			$_bear_gotoPage(){
				this.toPage(parseInt(this.pageInputVal)||0);
				this.pageInputVal=this.currentPage;
			},
			$_bear_changePageSize(){
				this.changePageSize(parseInt(this.pageSizeInputVal)||0);
				this.pageSizeInputVal=this.currentPageSize;
			},
			toPage(page){
				this.currentPage=Math.max(1,Math.min(this.allPages,page));
			},
			changePageSize(pageSize){
				this.currentPageSize=Math.max(1,pageSize);
			}
		}
	};
	const numberKey=['1','2','3','4','5','6','7','8','9','0','ArrowLeft','ArrowRight','Backspace'];
	function currentPageFn(page,allPages){
		page=Math.round(page);
		return Math.max(1,Math.min(allPages,page));
	}
	function currentPageSizeFn(pageSize){
		pageSize=Math.round(pageSize);
		return Math.max(1,pageSize);
	}
</script>

<style lang="scss">
	$active-color:#2d8cf0;
	.bear-PagePithy{
		display:flex;
		align-items:center;
		color:#515a6e;
		font-size:14px;
		>.bear-sizer{
			width:105px;
			margin-right:10px;
			input{
				text-align:center;
			}
		}
		>.bear-total{
			margin-right:10px;
		}
		>.bear-but{
			border:1px solid #dcdee2;
			border-radius:4px;
			transition:all .2s ease-in-out;
			color:#666;
			background:#fff;
			user-select:none;
			min-width:32px;
			height:32px;
			line-height:30px;
			text-align:center;
			cursor:pointer;
			padding:0 6px;
			&.disabled{
				color:#ccc;
				cursor:not-allowed;
			}
			&.active,&:not(.disabled):hover{
				border-color:$active-color;
				color:$active-color;
			}
		}
		>.bear-margin{
			margin-right:4px;
		}
		>.bear-center{
			margin:0 10px;
			input{
				text-align:center;
			}
		}
	}
</style>
